<template>
  <div class="add-container">
    <appHeader>修改收货地址</appHeader>
    <div class="herder">
      <ul>
        <li class="li"><label for="man">收货人</label><input autocomplete="off" type="text" id="man" placeholder="请填写收货人姓名" v-model="userInfo.receiver"></li>
        <li class="li"><label for="number">手机号码</label><input autocomplete="off" type="text" id="number" placeholder="请填写手机号码" v-model="userInfo.phoneNumber"></li>
        <li class="li"><label for="region">所在地区</label><input autocomplete="off" type="text" id="region" placeholder="请选择" v-model="userInfo.location"></li>
        <li class="xiangxi">
          <span class="title-box">详细地址</span><br>
          <input autocomplete="off" type="text" class="box" placeholder="街道楼号" v-model="userInfo.details">
        </li>
      </ul>
    </div>
    <div class="botton" @click="add">保存</div>
    <transition>
    <div class="add-mask" v-if="isidle">
      <div class="mask-container">
        <img src="../assets/X(2).png" alt="" class="x" @click="isidle = false">
        <span class="title">提示</span>
        <span class="success">收货地址修改成功</span>
        <router-link to="/auth/addRess">
          <div class="qr" @click ="addRess">确认</div>
        </router-link>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
import appHeader from '../components/appHeader';
export default {
  name: "reviseAddRess",
  data() {
      return {
        isidle: false,
        userInfo: {
          addrid:'',
          receiver: '',
          phoneNumber: '',
          location: '',
          details: '',
        }
      }
    },
    created(){
      if(this.$route.params.userInfo){
          this.userInfo.addrid = this.$route.params.userInfo._id;
          this.userInfo.receiver = this.$route.params.userInfo.receiver;
          this.userInfo.phoneNumber = this.$route.params.userInfo.phoneNumber;
          this.userInfo.location = this.$route.params.userInfo.location;
          this.userInfo.details = this.$route.params.userInfo.details;
        }
    },
    methods: {
      add(){
        this.isidle = true;
        this.$apis.reviseadd(this.userInfo)
          .then( data => console.log(data))
          .catch( error => console.log(error))
      },
      addRess(){
        this.isidle = false;
      },
    },
    components: {
      appHeader,
    },
  }
</script>

<style>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    outline: none;
  }
  .add-container{
    width: 100vw;
    height: 100vh;
  }
  .herder{
    width: 100vw;
    height: 5.5333rem;
    border-top: 1px solid #e6e6e6;
    overflow: hidden;
    position: relative;
    top: 1.4rem;
  }
  .herder>ul{
    position: relative;
    left: .3rem;
  }
  .herder>ul>li{
    width: 96vw;
    position: relative;
    line-height: 1.0933rem;
    font-size: .3733rem;
    color: #3e3e3e;
  }
  label{
    display: inline-block;
    width: 2rem;
  }
  li{
    border-bottom: 1px solid #e7e7e7;
  }
  .herder>ul>li>input{
    position: relative;
    left: .6rem;
  }
  .xiangxi{
    display: inline-block;
    position: relative;
    height: 2rem;
  }
  .xiangxi>input{
    position: relative;
    display: inline-block;
    width: 6rem;
    height: 1.1rem;
    margin-left: -.6rem;
    top: -.6rem;
  }
  .botton{
    width: 75%;
    height: 1.16rem;
    background: deepskyblue;
    position: relative;
    left: 14%;
    border-radius: .5rem;
    text-align: center;
    line-height: 1.16rem;
    font-size: .43rem;
    color: white;
    top: 2.4rem;
  }
  .add-mask{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.3);
    position: absolute;
    top: 0;
    left: 0;
  }
  .mask-container{
    width: 90%;
    height: 5rem;
    background: white;
    position: relative;
    top: 25%;
    left: 5%;
    border-radius: 5px;
    text-decoration: none;
  }
  .x{
    width: .5rem;
    height: .5rem;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .mask-container>span{
    display: block;
    width: 90vw;
    text-align: center;
  }
  .title{
    position: relative;
    top: 1.2rem;
    font-size: .4rem;
  }
  .success{
    position: relative;
    top: 1.7rem;
    font-size: .35rem;
  }
  .qr{
    width: 70vw;
    height: 1rem;
    position: relative;
    top: 2.6rem;
    left: 10vw;
    font-size: .4rem;
    background: deepskyblue;
    line-height: 1rem;
    text-align: center;
    border-radius: .5rem;
    color: white;
  }
  .title-box{
    display: inline-block;
    width: 100vw;
    height: 20px;
    z-index: 3;
  }
  .box{
    display: inline-block;
    position: absolute;
    width: 5rem;
    height: 1rem;
    margin-left: -2rem;
    margin-top: .4rem;
  }
  .v-enter-active,.v-leave-active {
    transition: all .7s;
  }
  .v-enter,.v-leave-to{
    opacity:0 !important;
  }
  .v-enter-to,.v-leave{
    margin-left:0px;
  }
  .show-enter-active,.show-leave-active{
    transition:all .7s;
  }
  .show-enter,.show-leave-to{
    opacity: 500;
  }
  .show-enter-to,.show-leave{
    margin-left:0px;
  }
</style>
